<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8">
		<title>JTOPO虚线流动demo</title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
		<script src="jtp/jtopo-0.4.8-min.js" type="text/javascript"></script>	
		
		<script type="text/javascript">
			 $(document).ready(function(){
				 CanvasRenderingContext2D.prototype.JTopoDashedLineTo = function(a, b, c, d, e) {
					 var animespeed=(new Date())/100;
					 "undefined" == typeof e && (e = 5);
					 var f = c - a,//x轴差
							 g = d - b,//y轴差
							 h = Math.floor(Math.sqrt(f * f + g * g)),//勾股定理,直线长度
							 i = 0 >= e ? h: h / e,//虚线段数
							 j = g / h * e,
							 k = f / h * e;
					 this.beginPath();
					 animespeed=animespeed%(e*2);
					 var txs=-f/h*animespeed;
					 var tys=-g/h*animespeed;
					 for (var l = 0; i > l-1; l++) {
						 l % 2 ? this.lineTo(a + l * k-txs, b + l * j-tys) : this.moveTo((a + l * k-txs)>(a+i*k)?(a + l * k):(a + l * k-txs), (b + l * j-tys)>(b + i * j)?(b + l * j):(b + l * j-tys))
					 };
					 this.stroke()
				 };
				 CanvasRenderingContext2D.prototype.JtopoDrawPointPath=function(a,b,c,d,e,f){
					 var animespeed=(new Date())/10;
					var xs=c- a,
						xy=d- b,
						l = Math.floor(Math.sqrt(xs * xs + xy * xy)),
							colorlength=50,
							j=l;
						xl=xs/ l,
					    yl=xy/l;
					 var colorpoint=animespeed%(l+colorlength)-colorlength;

					 for(var i=0;i<j;i++){
						 if(((i)>colorpoint)&&((i)<(colorpoint+colorlength))){
							 this.beginPath();
							 this.strokeStyle=e;
							 this.moveTo(a+(i-1)*xl,b+(i-1)*yl);
							 this.lineTo(a+i*xl,b+i*yl);
							 this.stroke();
						 }else{
							 this.beginPath();
							 this.strokeStyle=f;
							 this.moveTo(a+(i-1)*xl,b+(i-1)*yl);
							 this.lineTo(a+i*xl,b+i*yl)
							 this.stroke();
						 }
					 }
				 };
            	var canvas = document.getElementById('canvas'); //舞台           
            	var stage = new JTopo.Stage(canvas);//场景
            //显示工具
            	var scene = new JTopo.Scene(stage);

            	var node = new JTopo.Node("Hello");                            
            	node.setLocation(10, 10);
            	scene.add(node);
				
            	var node2 = new JTopo.Node("Hello");                            
            	node2.setLocation(400, 200);
            	scene.add(node2);
				var link1=new JTopo.Link(node,node2);
				link1.dashedPattern =5;
				 link1.strokeColor="255,0,255";
				scene.add(link1)
			
        });
        
		</script>
	</head>
	<body>
			<canvas width="800"height="500"id="canvas"style=" background-color:#EEEEEE; border:1px solid #444;">
			</canvas>
	</body>
</html>